<ion-header>
  <ion-navbar color="light" style="padding:0;">
    <ion-title>
        {{ 'Favorites' | translate }}
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div class="list-content">
    <div *ngFor="let house of list"  (click)="goDetail(house)">
        <div class="house" *ngIf="house.cate!=4">
            <div class="house_content">
                <div class="house_img" style="margin-bottom:0;" [style.background-image]="house.img">
                    <a class="iconfont"><img [src]=" house.collect?'./assets/imgs/love_active.png':'./assets/imgs/love.png' " alt=""></a>
                </div>
                <div class="house_info">
                    <p><i class="iconfont icon-map_map"></i><font>{{house.address}}</font></p>
                    <p> 
                        <label for=""> <i class="iconfont icon-detail_sofa"></i><font>{{house.living}}</font> </label>
                        <label for=""> <i class="iconfont icon-detail_bed"></i><font>{{house.bedroom}}</font> </label>
                        <label for=""> <i class="iconfont icon-bad"></i><font>{{house.bathroom}}</font> </label>
                        <label for=""> <font>{{house.area}}{{house.area_unit}}({{house.other_area}}{{house.other_area_unit}})</font> </label>
                    </p>
                    <p>
                        <font>{{house.cateName}}</font>
                    <span>{{house.price_unit}} {{house.price}}<span *ngIf="house.cate!=2"> /{{house.price_type}}</span></span>
                    </p>
                </div>
            </div>
          </div>
          <div class="service" *ngIf="house.cate==4">
              <div class="service_content">
                  <div class="service_img" [style.background-image]="'url('+src+house.avatar+')'"></div>
                  <div class="service_info">
                        <h5>{{house.title.replace('|',' ')}}
                            <a *ngIf="house.collected==true" class="iconfont icon-list_heartsvg active"></a>
                            <a *ngIf="house.collected==false" class="iconfont icon-list_heartsvg"></a>
                        </h5>
                        <p>{{house.address}}<font class="price">{{house.price_unit}}{{house.price}}/once</font>  </p>
                        <p>
                            <span class="stars">
                              <i class="iconfont" [class.icon-star]="house.star>=1" [class.icon-star1]="house.star<1"></i>
                              <i class="iconfont" [class.icon-star]="house.star>=2" [class.icon-star1]="house.star<2"></i>
                              <i class="iconfont" [class.icon-star]="house.star>=3" [class.icon-star1]="house.star<3"></i>
                              <i class="iconfont" [class.icon-star]="house.star>=4" [class.icon-star1]="house.star<4"></i>
                              <i class="iconfont" [class.icon-star]="house.star>=5" [class.icon-star1]="house.star<5"></i>
                            </span> 
                          {{house.num}} reviews 
                        </p>
                  </div>
              </div>
          </div>
    </div>
    
  </div>
</ion-content>
